<template>
  <view class="recruit-page">
    <view class="recruit-banner"></view>
    <view class="recruit-nav">
      <up-tabs :list="recruitList" :lineColor="`url(${lineBg}) 100% 100%`" lineWidth="28rpx" lineHeight="28rpx"
        :activeStyle="{
          color: '#FF416C',
          fontSize:'32rpx'
      }" :inactiveStyle="{
          color: '#333333',
          fontSize:'28rpx'
      }" @change="onRecruit"></up-tabs>
      <view class="recruit-code">
        <view class="recruit-title">{{titleName}}号<view class="title-label">*</view>
        </view>
        <up-input :placeholder="`请输入${titleName}号`" border="none" inputAlign="right" v-model="codeValue"></up-input>
      </view>
      <view class="recruit-phone">
        <view class="recruit-title">联系方式<view class="title-label">*</view>
        </view>
        <up-input placeholder="请输入手机号或微信号" border="none" inputAlign="right" v-model="phoneValue"></up-input>
      </view>
      <view class="recruit-notes">
        <view class="recruit-title">其他说明</view>
        <up-textarea v-model="noteValue" placeholder="请填写说明原因" ></up-textarea>
      </view>
    </view>
    <up-button text="提交申请" shape="circle" color="#FF416C" @click="onConfirm"></up-button>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  const lineBg = "../../static/icon/user/line-list.png";
  const recruitList = reactive([{
      name: '小红书'
    },
    {
      name: '抖音'
    }
  ])
  const titleName = ref('小红书')
  const noteValue = ref('')
  const codeValue = ref('')
  const phoneValue = ref('')
  function onConfirm(){
    console.log(codeValue.value,phoneValue.value,noteValue.value,9999)
    uni.navigateTo({
      url:'/subpages/index/recruit-confirm'
    })
  }
  function onRecruit(e) {
    console.log(e, 3333)
    titleName.value = e.name
  }
</script>

<style lang="less" scoped>
  .recruit-page {
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #FFFFFF 0%, #FF416C 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 32rpx;

    .recruit-banner {
      height: 356rpx;
      width: 100%;
    }

    .recruit-nav {
      width: 100%;
      height: 730rpx;
      border-radius: 24rpx;
      background: #FFFFFF;
      margin-bottom: 32rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      // padding: 0 24rpx;
      /deep/ .u-tabs__wrapper__nav__item {
        position: relative;
      }

      /deep/ .u-tabs__wrapper__nav__line {
        position: absolute;
        top: 16rpx;
        right: 91%;
      }

      .recruit-code,
      .recruit-phone {
        width: 638rpx;
        height: 96rpx;
        border-radius: 12rpx;
        background: #F2F2F2;
        margin: 20rpx auto 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 24rpx 20rpx;
      }
      .recruit-notes{
        width: 638rpx;
        margin: 40rpx auto 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 24rpx 0;
        /deep/ .u-textarea{
          background-color: #F2F2F2;
          margin-top: 24rpx;
        }
      }

      .recruit-title {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        display: flex;

        .title-label {
          color: #FF3D24
        }
      }
    }
  }
</style>